<template>
	<Dropdown @on-click="onMenuClick" v-if="hasChildren" placement="right-start" transfer>
		<MenuItem :name="menu.id">
			<img v-if="menu.icon" :src="menu.icon" />
			<span>{{name}}</span>
		</MenuItem>
		<DropdownMenu slot="list">
			<DropdownItem>{{name}}</DropdownItem>
			<template v-for="(child, index) in menu.children">
				<RecursionDropMenuItem :menu="child" :divided="index == 0"></RecursionDropMenuItem>
			</template>
		</DropdownMenu>
	</Dropdown>
	<Tooltip v-else :content="name" placement="right" transfer>
		<MenuItem :name="menu.id">
			<img v-if="menu.icon" :src="menu.icon" />
			<span>{{name}}</span>
		</MenuItem>
	</Tooltip>
</template>
<script type="text/javascript">
import { MenuItem, Dropdown, DropdownMenu, DropdownItem, Tooltip } from 'view-design';
import RecursionDropMenuItem from './recursion-drop-menu-item.vue';

export default {
	name: 'RecursionDropMenu',
	props: {
		menu: Object
	},
	computed: {
		hasChildren() {
			return this.menu.children && this.menu.children.length;
		},
		name() {
			return this.menu.i18n && this.$t ? this.$t(this.menu.i18n) : this.menu.name;
		}
	},
	methods: {
		onMenuClick(name) {
			this.$emit("on-click", name);
		}
	},
	components: {
		MenuItem,
		Dropdown,
		DropdownMenu,
		DropdownItem,
		RecursionDropMenuItem,
		Tooltip
	}
}
</script>